function WriteBoard(container, size, color) {
  this.canvas = {};
  this.board = {};
  this.mousePress = false;
  this.last = null;

  WriteBoard.prototype.init = function () {
    this.canvas = document.createElement("canvas");
    
    container.appendChild(this.canvas);

    

    this.canvas.width = container.clientWidth;
    this.canvas.height = container.clientHeight;

    this.board = this.canvas.getContext("2d");

    this.board.lineWidth = size;
    this.board.strokeStyle = color;

    var _this = this;

    var beginDraw = function () {
      _this.beginDraw.call(_this);
    };
    var drawing = function (event) {
      _this.drawing.call(_this, event);
    };
    var endDraw = function (event) {
      _this.endDraw.call(_this, event);
    };

    this.canvas.onmousedown = beginDraw;
    this.canvas.onmousemove = drawing;
    this.canvas.onmouseup = endDraw;
    this.canvas.addEventListener('mouseout',event=>{
      this.mousePress = false
      this.last = null
    })

    this.canvas.addEventListener("touchstart", beginDraw, false);
    this.canvas.addEventListener("touchmove", drawing, false);
    this.canvas.addEventListener("touchend", endDraw, false);
  };

  if (!WriteBoard.prototype.__init__) {
    WriteBoard.prototype.beginDraw = function () {
      this.mousePress = true;
      this.last = null;
    };

    WriteBoard.prototype.drawing = function (event) {
      event.preventDefault();
      if (!this.mousePress) return;
      var xy = this.pos(event);
      if (this.last != null) {
        this.board.beginPath();
        this.board.moveTo(this.last.x, this.last.y);
        this.board.lineTo(xy.x, xy.y);
        this.board.stroke();
      }
      this.last = xy;
    };

    WriteBoard.prototype.endDraw = function (event) {
      this.mousePress = false;
      event.preventDefault();
      this.last = null;
    };

    WriteBoard.prototype.pos = function (event) {
      var x, y;
      if (this.isTouch(event)) {
        x = event.touches[0].pageX;
        y = event.touches[0].pageY-120;
      } else {
        x = event.offsetX ;//+ event.target.offsetLeft;
        y = event.offsetY;// + event.target.offsetTop;
      }
      return { x: x, y: y }; // -10 为了让笔尖在鼠标尖
    };

    WriteBoard.prototype.isTouch = function (event) {
      var type = event.type;
      if (type.indexOf("touch") >= 0) {
        return true;
      } else {
        return false;
      }
    };

    WriteBoard.prototype.save = function () {
      //base64
      var dataUrl = this.canvas.toDataURL();
      return dataUrl;
    };

    WriteBoard.prototype.clean = function () {
      this.board.clearRect(
        0,
        0,
        this.board.canvas.width,
        this.board.canvas.height
      );
    };
    WriteBoard.prototype.__init__ = true;
  }
}
export function HandWriteBoard(container, size, color) {
  var argLength = arguments.length;
  var board = {};
  if (argLength == 2) board = new WriteBoard(container, size, "#333333");
  else if (argLength == 3) board = new WriteBoard(container, size, color);
  else board = new WriteBoard(container, 5, "#333333");
  board.init();
  return board;
}
